<template>
  <div class="product-list" style="width: 100%">
    <el-table :data="products" :loading="state.loading" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" fixed="left" />
      <el-table-column prop="name" label="产品名称" width="100" fixed="left"> </el-table-column>
      <el-table-column prop="size" label="规格型号" width="100"> </el-table-column>
      <el-table-column prop="material" label="工艺材质" width="100"> </el-table-column>
      <el-table-column prop="unit" label="单位" width="100"> </el-table-column>
      <el-table-column prop="num" label="数量" width="100"> </el-table-column>
      <el-table-column prop="unit_price" label="单价（元）" width="100"> </el-table-column>
      <el-table-column prop="total_price" label="总价（元）" width="100"> </el-table-column>
      <el-table-column prop="supplier.name" label="供应商" width="100"> </el-table-column>
      <el-table-column prop="remark" label="备注" width="100"> </el-table-column>
    </el-table>
    <ViewFilesDialog ref="viewFilesDialogRef"></ViewFilesDialog>
  </div>
</template>

<script setup lang="ts" name="selectProductList">
import { reactive } from 'vue';

defineProps({
  products: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: Array,
  },
});

const emit = defineEmits(['update:modelValue', 'change']);

const state = reactive({
  products: [],
  loading: true,
});

const handleSelectionChange = (val: any) => {
  emit(
    'update:modelValue',
    val.map((item) => item.id)
  );
  emit('change', val);
};
</script>

<style lang="scss"></style>
